<!DOCTYPE html>
<html lang="zh">
<head>
    <title>首页</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/css/layui.css">
    <script src="/static/js/layui.js"></script>
    <script src="/static/js/jquery-3.5.1.min.js"></script>
    <style>
        body {
            background-color: #f2f1f1;
            background-repeat:no-repeat;
            background-attachment:fixed

        }
        .global-body {
            width: 100%;
            margin: 2% 4%;
        }
         .host-card {
             background-color: #eeeeee;
             width: 20%;
             margin-right: 4%;
             margin-bottom: 2em;
             box-shadow: darkgrey 10px 10px 20px 5px ;
         }
        .host-card:last-child {
            margin-bottom: 2em;
        }
        .mButton {
            float: right;
            color: blue;
            font-size: 12px;
            cursor: pointer;
            margin-left: 10px;
        }
    </style>
</head>
{{template "header" .}}
<body>
<div class="global-body">
    <div>
        <button id="insert" type="button" class="layui-btn layui-btn-primary layui-btn-sm hostForm" style="width: 4rem;height: 4rem;position: fixed;bottom: 3rem;right: 3rem;z-index: 9999;background-color: #393D49">
            <p style="font-size: 15px;color: #FFFFFF">新增</p>
        </button>
        {{range .Hosts}}
            <div id="{{.Id}}" class="layui-card host-card layui-inline">
                <div class="layui-card-header">
                    主机
                    <a class="mButton del" style="color: red">删除</a>
                    <a class="mButton edit hostForm">编辑</a>
                    <a href="/ssh/?id={{.Id}}" class="mButton">命令</a>
                </div>
                <div class="layui-card-body">
                    主机名: <a href="">{{.Name}}</a><br>
                    {{if .Status}}
                        状态: <span class="layui-badge-dot layui-bg-green" style="margin-left: 5px"></span><br>
                    {{else}}
                        状态:<span class="layui-badge-dot" style="margin-left: 5px"></span><br>
                    {{end}}
                    用户: {{.User}}<br>
                    地址: {{.Addr}}<br>
                    端口: {{.Port}}<br>
                    {{if .Group}}
                        组: <a href="/shell?type=group&id={{.Id}}">{{.Group.Name}}</a><br>
                    {{else}}
                        组: 无<br>
                    {{end}}
                    标签:
                    {{range .Tags}}
                        <a style="font-size: 11px; color: blue; float: right;margin-right: 10px" href="/shell?type=tag&id={{.Id}}">{{.Name}}</a>
                    {{end}}
                    <br>
                </div>
            </div>
        {{end}}
    </div>

    <form class="layui-form" id="editFrom" style="display:none;margin:50px 50px 0 0">
        <div class="layui-form-item">
            <label class="layui-form-label">主机名</label>
            <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入主机名" autocomplete="on" class="layui-input" id="hostname" style="width: 200px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户</label>
            <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入用户" autocomplete="on" class="layui-input" id="user" style="width: 200px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入地址" autocomplete="on" class="layui-input" id="addr" style="width: 200px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">端口</label>
            <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入端口" autocomplete="on" class="layui-input" id="port" style="width: 200px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="on" class="layui-input" id="password" style="width: 200px">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分组</label>
            <div class="layui-input-block">
                <select name="group" lay-verify="required" id="group">
                    <option value="">请选择分组</option>
                    {{range .Groups}}
                        <option value="{{.Id}}">{{.Name}}</option>
                    {{end}}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标签</label>
            <div class="layui-input-block" id="tag">
                {{range .Tags}}
                    <input type="checkbox" name="{{.Id}}" title="{{.Name}}">
                {{end}}
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密钥</label>
            <input type="file" id='keyFile'>
        </div>
    </form>

    <script>
        function fillHost(sid) {
            $.ajax({
                "url" : "/host/" + sid,
                "type" : "get",
                "success" : callBack,
                "error" : function(err) {
                    console.log(err)
                }
            });
            function callBack(data) {
                data = data.data;
                $("#hostname").val(data.Name);
                $("#addr").val(data.Addr);
                $("#port").val(data.Port);
                $("#user").val(data.User);
                $("#password").val(data.PassWord);
                $("#group").val(data.Group.Id);
                if (data.Tags != null) {
                    for (var j = 0; j < data.Tags.length; j++) {
                        var unitTypeCheckbox = $('input[type=checkbox]');
                        for (var i = 0; i < unitTypeCheckbox.length; i++) {
                            if (unitTypeCheckbox[i].name == data.Tags[j].Id) {
                                unitTypeCheckbox[i].checked = true;
                            }
                        }
                    }
                }
                layui.form.render();

            }
        }
        layui.use('layer', function(){
            var $ = layui.jquery;
            // 删除操作
            $('a.del').click(function()
            {
                var sid = $(this).parent().parent().attr('id');
                layer.confirm("确认要删除吗，删除后不能恢复", { title: "删除确认" }, function (index) {
                    $.ajax({
                        "url" : "/host/" + sid,
                        "type" : "delete",
                        "success" : callBack,
                        "error" : function(err) {
                            console.log(err)
                        }
                    });
                    function callBack(data) {
                        if (data.code === "200") {
                            $(".host-card#"+sid).remove()
                        }else {
                            layer.msg("delete error")
                        }
                        layer.close(index);
                    }
                });

            })
        });
        layui.use('layer', function() {
            $('.hostForm').click(function () {
                var title;
                var funcStr;
                var sid = $(this).parent().parent().attr('id');
                if ($(this).hasClass("edit")) {
                    title = "编辑设备";
                    fillHost(sid);
                    funcStr = "put"
                }else {
                    $("#editFrom")[0].reset();
                    layui.form.render();
                    title = "新增设备";
                    funcStr = "post"
                }
                layer.open({
                    type: 1,
                    area: ['550px', '600px'],
                    title: title
                    , content: $("#editFrom"),
                    shade: 0,
                    btn: ['提交', '重置']
                    , btn1: function (index, layero) {
                        var tags = [];
                        // 提交按钮
                        var hostname = $("#hostname").val();
                        var addr = $("#addr").val();
                        var port = $("#port").val();
                        var user = $("#user").val();
                        var password = $("#password").val();
                        var group = $("#group").val();
                        $('input[type=checkbox]:checked').each(function(){
                            tags.push($(this).attr("name"))
                        });
                        var keyFile = $("#keyFile")[0].files[0];
                        var formData = new FormData();
                        formData.append("id", sid);
                        formData.append("hostname", hostname);
                        formData.append("addr", addr);
                        formData.append("port", port);
                        formData.append("user", user);
                        formData.append("password", password);
                        formData.append("group", group);
                        formData.append("keyFile", keyFile);
                        formData.append("tags", JSON.stringify(tags));
                        $.ajax({
                            "url" : "/host",
                            "type" : funcStr,
                            "data": formData,
                            "processData" : false,
                            "contentType" : false,
                            "success" : callBack,
                            "error" : function(err) {
                                layer.msg(err);
                            }
                        });
                        function callBack(data) {
                            location.reload();
                            layer.close(index);
                        }
                    },
                    btn2: function (index, layero) {
                        $("#editFrom")[0].reset();
                        layui.form.render();
                        return false;
                    },
                    cancel: function (layero, index) {
                        layer.closeAll();
                    }

                });
            })
        })

    </script>
</div>
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;
    });
    //From
    layui.use('form', function(){
        var form = layui.form;
    });
</script>
</body>
</html>
